/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-02-24 13:45:38
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Modal\MoreModal\CementMixing.jsx
 * @Description  :
 */

import { Http } from '../../Api'
import { Descriptions } from 'antd'
import { useEffect, useState } from 'react'
import { useRequest } from 'ahooks'

// !!! 水泥拌合站模块
export const CementMixing = ({ data, className }) => {
    const [Data, setData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true })
    useEffect(() => {
        getData({ url: data.api, path: [data.uuid] }).then(res => {
            setData(res)
        })
    }, [data, getData])
    const [dataInfoList] = useState([
        { firLine: '水1(kg)', twoLine: 'water1Act', thrLine: 'water1Oper' },
        { firLine: '水2(kg)', twoLine: 'water2Act', thrLine: 'water2Oper' },
        { firLine: '水泥1(kg)', twoLine: 'cement1Act', thrLine: 'cement1Oper' },
        { firLine: '水泥2(kg)', twoLine: 'cement2Act', thrLine: 'cement2Oper' },
        { firLine: '水泥3(kg)', twoLine: 'cement3Act', thrLine: 'cement3Oper' },
        { firLine: '砂1(kg)', twoLine: 'sand1Act', thrLine: 'sand1Oper' },
        { firLine: '砂2(kg)', twoLine: 'sand2Act', thrLine: 'sand2Oper' },
        { firLine: '碎石1(kg)', twoLine: 'gravel1Act', thrLine: 'gravel1Oper' },
        { firLine: '碎石2(kg)', twoLine: 'gravel2Act', thrLine: 'gravel2Oper' },
        { firLine: '碎石3(kg)', twoLine: 'gravel3Act', thrLine: 'gravel3Oper' },
        { firLine: '碎石4(kg)', twoLine: 'gravel4Act', thrLine: 'gravel4Oper' },
        { firLine: '矿粉', twoLine: 'slagPowderAct', thrLine: 'slagPowderOper' },
        { firLine: '粉煤灰(kg)', twoLine: 'flyashAct', thrLine: 'flyashOper' },
        { firLine: '减水剂(kg)', twoLine: 'waterReducerAct', thrLine: 'waterReducerOper' },
        { firLine: '水胶比(kg)', twoLine: 'waterBinderRatio', thrLine: '' },
        { firLine: '砂率(kg)', twoLine: 'sandRatio', thrLine: '' },
    ])
    return (
        <div className="LabStressMachine">
            <Descriptions bordered style={{ marginBottom: 8 }}>
                <Descriptions.Item label="出料时间">{Data?.dischargingTime}</Descriptions.Item>
                <Descriptions.Item label="工程名">{Data?.projectName}</Descriptions.Item>
                <Descriptions.Item label="设备编号">{Data?.equipmentCode}</Descriptions.Item>
                <Descriptions.Item label="上传时间">{Data?.uploadTime}</Descriptions.Item>
                <Descriptions.Item label="浇筑部位">{Data?.pouringPosition}</Descriptions.Item>
                <Descriptions.Item label="强度等级">{Data?.strengthGrade}</Descriptions.Item>
                <Descriptions.Item label="施工配合比编号">{Data?.proportionOperId}</Descriptions.Item>
                <Descriptions.Item label="理论方量">{Data?.quantityOper} m³</Descriptions.Item>
                <Descriptions.Item label="实际方量">{Data?.quantityAct} m³</Descriptions.Item>
            </Descriptions>
            <div className="ant-descriptions ant-descriptions-bordered" style={{ marginBottom: 8 }}>
                <div className="ant-descriptions-view">
                    <table>
                        <tbody>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>材料名称</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <th
                                        className="ant-descriptions-item-label"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{item.firLine}</span>
                                    </th>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>实际用量</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <td
                                        className="ant-descriptions-item-content"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{Data?.[item.twoLine]}</span>
                                    </td>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>理论用量</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <td
                                        className="ant-descriptions-item-content"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{Data?.[item.thrLine]}</span>
                                    </td>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <td
                                    className="ant-descriptions-item-content"
                                    colSpan="17"
                                    style={{ textAlign: 'center', color: 'rgb(255,0,0)' }}
                                >
                                    <span>表中水胶比、砂率值仅供参考 </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}
